<template>
  <div id="distribution_map"></div>
</template>

<script>
import tdTheme from "@/api/ops/echart/theme.json"; // 引入默认主题
import * as mapData from "@/utils/china.json";
import {
  provinceRegionCount,
  alarmCountGroupByProvince,
} from "@/api/ops/dashboard";

export default {
  name: "chinaMap",
  data() {
    return {
      options: {},
      map: [],
      myChart: null,
      geoCoord: {
        甘肃: [103.73, 36.03],
        青海: [101.74, 36.56],
        四川: [104.06, 30.67],
        河北: [114.48, 38.03],
        云南: [102.73, 25.04],
        贵州: [106.71, 26.57],
        湖北: [114.31, 30.52],
        河南: [113.65, 34.76],
        山东: [117, 36.65],
        江苏: [118.78, 32.04],
        安徽: [117.27, 31.86],
        浙江: [120.19, 30.26],
        江西: [115.89, 28.68],
        福建: [119.3, 26.08],
        广东: [113.23, 23.16],
        湖南: [113, 28.21],
        海南: [110.35, 20.02],
        辽宁: [123.38, 41.8],
        吉林: [125.35, 43.88],
        黑龙江: [126.63, 45.75],
        山西: [112.53, 37.87],
        陕西: [108.95, 34.27],
        台湾: [121.3, 25.03],
        北京: [116.46, 39.92],
        上海: [121.48, 31.22],
        重庆: [106.54, 29.59],
        天津: [117.2, 39.13],
        内蒙古: [111.65, 40.82],
        广西: [108.33, 22.84],
        西藏: [91.11, 29.97],
        宁夏: [106.27, 38.47],
        新疆: [87.68, 43.77],
        香港: [114.17, 22.28],
        澳门: [113.54, 22.19],
      },
    };
  },
  props: {
    refreshNum: String,
  },
  watch: {
    refreshNum(val, oldVal) {
      this.alarmCountGroupByProvince();
    },
  },
  mounted() {
    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
    this.$echarts.registerMap('china', mapData);
    this.init();
    this.provinceRegionCount();
    this.alarmCountGroupByProvince();
  },
  methods: {
    provinceRegionCount() {
      let $this = this;
      provinceRegionCount().then((response) => {
        if (response.code == 0 && response.data != null) {
          for (let x in response.data) {
            if (
              response.data[x].province.startsWith("内蒙古") ||
              response.data[x].province.startsWith("黑龙江")
            ) {
              let item = {
                name: response.data[x].province.substring(0, 3),
                value: response.data[x].count,
              };
              $this.map.push(item);
            } else {
              let item = {
                name: response.data[x].province.substring(0, 2),
                value: response.data[x].count,
              };
              $this.map.push(item);
            }
          }
          $this.options.series[0].data = $this.map;
          $this.myChart.setOption($this.options);
        }
      });
    },
    alarmCountGroupByProvince() {
      let $this = this;
      alarmCountGroupByProvince().then((response) => {
        if (response.code == 0 && response.data != null) {
          let data = [];
          for (let x in response.data) {
            let province = response.data[x]["province"] || '';
            if (
              province.startsWith("内蒙古") ||
              province.startsWith("黑龙江")
            ) {
              province = province.substring(0, 3);
            }
            province = province.substring(0, 2);
            let color = "greenyellow";
            if (response.data[x]["level"] == 2) {
              color = "orangered";
            }
            let values = this.geoCoord[province] || [];
            if (values.length < 3) {
              values.push(response.data[x]["count"]);
            } else {
              values[2] = response.data[x]["count"];
            }
            let item = {
              name: province,
              value: values,
              itemStyle: { color: color },
            };
            data.push(item);
          }
          $this.options.series[1].data = data;
          $this.myChart.setOption($this.options);
        }
      });
    },
    init() {
      let worldMapContainer1 = document.getElementById("distribution_map");
      this.myChart = this.$echarts.init(worldMapContainer1, "tdTheme");
      this.options = {
        tooltip: {
          formatter: function (params) {
            if (params.seriesType == "map") {
              if (params.data) {
                return params.data.name + "<br/>项目数量：" + params.data.value;
              }
            } else {
              return (
                params.data.name + "<br/>告警总数：" + params.data.value[2]
              );
            }
          },
        },
        legend: {
          orient: "vertical",
          x: "left",
          y: "bottom",
          data: ["已安装设备"],
          textStyle: {
            color: "#ccc",
          },
        },
        geo: {
          map: "china",
          aspectScale: 0.75, //长宽比
          zoom: 1.2,
          roam: false,
          itemStyle: {
            normal: {
              color: "red",
              areaColor: "rgba(19,54,162, .5)",
              borderColor: "rgba(0,242,252,.3)",
              borderWidth: 1,
              shadowBlur: 7,
              shadowColor: "#00f2fc",
            },
            emphasis: {
              areaColor: "#4f7fff",
              borderColor: "rgba(0,242,252,.6)",
              borderWidth: 2,
              shadowBlur: 10,
              shadowColor: "#00f2fc",
            },
          },
        },
        series: [
          {
            name: "",
            type: "map",
            aspectScale: 0.75,
            zoom: 1.2,
            mapType: "china",
            roam: false,
            label: {
              normal: {
                show: true, //显示省份标签
                textStyle: { color: "#efefef" }, //省份标签字体颜色
              },
              emphasis: {
                //对应的鼠标悬浮效果
                show: true,
                textStyle: { color: "#fff" },
              },
            },
            itemStyle: {
              normal: {
                color: "red",
                areaColor: "rgba(19,54,162, .5)",
                borderColor: "rgba(0,242,252,.3)",
                borderWidth: 1,
                shadowBlur: 7,
                shadowColor: "#00f2fc",
              },
              emphasis: {
                areaColor: "#4f7fff",
                borderColor: "rgba(0,242,252,.6)",
                borderWidth: 2,
                shadowBlur: 10,
                shadowColor: "#00f2fc",
              },
            },
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            showEffectOn: "render",
            symbol: "circle",
            symbolSize: 20,
            zlevel: 1,
            rippleEffect: {
              period: 4,
              scale: 5,
              brushType: "stroke",
            },
            hoverAnimation: true,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(this.options);
      this.myChart.on("click", function (params) {
        //点击事件
        if (params.componentType === "series") {
        }
      });
    },
  },
};
</script>

<style scoped>
#distribution_map {
  /* height: 7rem; */
  height: 100%;
  width: 100%;
  padding: 10px;
}
</style>
